<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <script src="../js/swiper-bundle.js"></script>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/details.css">
    <link rel="stylesheet" href="../css/bottom.css">

</head>

<body>
    <div class="swiper-container swiper-top">
        <div class="swiper-wrapper top-swi">
            <div class="swiper-slide">YSL全新「大理石」气垫，混干挚爱，高阶微光奶油肌，润·遮·亮 一步到位</div>
            <div class="swiper-slide">10.1-10.15任购满500臻享免费刻字礼遇，定制专属您的YSL星品</div>
            <div class="swiper-slide">10.1-10.15任购满500臻享免费刻字礼遇，定制专属您的YSL星品</div>
        </div>
        <div class="swiper-button-prev top-button-prev"></div>
        <div class="swiper-button-next top-button-next"></div>
    </div>
    <div class="logo" id="logo">
        <div class="wrapper">
            <ul class="wrapper-left">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31dingwei
                        "></use>
                      </svg> 专柜查询
                </li>
                <li>客服中心</li>
            </ul>
            <a href="index.html">
                <img src="../images/logo@2x.png" alt="">
            </a>
            <ul class="wrapper-right">
                <li>关注我们</li>
                <li class="wrapper-right-sp">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                    <span><a href="./login.html">登录</a></span>
                    <span class="split"></span>
                    <span><a href="./register.html">注册</a></span>
                </li>
                <li>购物袋</li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <div class="nav-con">
            <ul class="nav-con-ul">
                <li class="nav-con-ul-li">
                    <a class="nav-con-li" href="#">锁定11.11权益</a>

                </li>
                <li class="nav-con-ul-li" id="control">
                    <a class="nav-con-li" href="#">彩妆</a>
                </li>
                <li class="nav-con-ul-li">
                    <a href="#">护肤</a>
                </li>
                <li class="nav-con-ul-li">
                    <a href="#">人气香水</a>
                </li>
                <li class="nav-con-ul-li">
                    <a class="nav-con-li" href="#">礼盒</a>
                </li>
                <li class="nav-con-ul-li">
                    <a href="#">定制服务</a>
                </li>
                <li class="nav-con-ul-li">
                    <a href="#">会员中心</a>
                </li>
                <li class="nav-con-ul-li">
                    <a href="#">品牌故事</a>
                </li>
            </ul>
            <div class="input-form">
                <span class="sear">搜索商品</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                  </svg>
            </div>
        </div>
    </div>
    <div class="main-top">
        <div class="main-top-con">
            <h1>唇部</h1>
            <a href="./index.html">返回主页</a>
        </div>
        <div class="main-con">
            <ul id="plist">

            </ul>
        </div>

    </div>
    <div class="footer-topcontent">
        <div class="topcontent-wrapper">
            <div class="topcontent-item">
                <div class="topcontent-item-wrapper">
                    <img class="icon-box" src="../images/topcontent01.png" alt="ysl">
                    <p class="main-text">独家优惠</p>
                    <p class="sub-text">独家在线产品和特权</p>
                </div>
            </div>
            <div class="topcontent-item">
                <div class="topcontent-item-wrapper">
                    <img class="icon-box" src="../images/topcontent02.png" alt="ysl">
                    <p class="main-text">正品保证</p>
                    <p class="sub-text">官方直供原装</p>
                </div>
            </div>
            <div class="topcontent-item">
                <div class="topcontent-item-wrapper">
                    <img class="icon-box" src="../images/topcontent03.png" alt="ysl">
                    <p class="main-text">免费顺丰速递</p>
                    <p class="sub-text">港澳台偏远地区除外亦可提供普通快递服务</p>
                </div>
            </div>
            <div class="topcontent-item">
                <div class="topcontent-item-wrapper">
                    <img class="icon-box" src="../images/topcontent04.png" alt="ysl">
                    <p class="main-text">高定礼盒</p>
                    <p class="sub-text">尊享YSL高定礼盒包装甄享官网专属定制服务</p>
                </div>
            </div>
        </div>

    </div>

    <script>
        function loadProductList() {
            let prodcutListAPI =
                "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            let pagesize = 20;
            let pagenum = 0; //商品列表 从0页开始
            let uid = localStorage.getItem("id");
            let params = {
                pagesize: pagesize,
                pagenum: pagenum,
                uid
            };
            axios.get(prodcutListAPI, {
                params: params
            }).then((res) => {
                console.log(res.data);
                // 商品数据 数组
                let productArr = res.data.data;
                let html = "";
                productArr.forEach((pObj) => {
                    html += `
                    <div class="show-con">
                        <p>新品</p>
                        <a href="item.html?id=${pObj.pid}"><img src="${pObj.pimg}" alt=""></a>
                        <ul>
                            <li><a href="">${pObj.pname}</a></li>
                            <li><a href="">${pObj.pdesc}</a></li>
                            <li><span></span><span></span><span></span></li>
                            <li>
                                <span>￥${pObj.pprice}</span>
                            </li>
                        </ul>
                    </div>  `;
                });
                document.querySelector("#plist").innerHTML = html;
            });
        }

        loadProductList();

        //index 用户展示
        if (localStorage.getItem('username')) {
            let yhm = document.querySelector('.wrapper-right-sp');
            console.log(yhm);
            yhm.innerHTML = "您好," + localStorage.getItem("username") + '<a href = "login.html" id = "exit" >退出</a>';
        }

        let exit = document.querySelector('#exit');
        exit.addEventListener('click', function() {
            localStorage.removeItem('username');
            setTimeout(() => {
                location.href = "login.html";
            }, 1000);
        })

        window.onload = function() {
            var mySwiper = new Swiper(".swiper-container", {
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    delay: 2500, //事件间隔
                    stopOnLastSlide: false, //
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true, //输入移入 停止
                },
            });
        }
    </script>
</body>

</html>